<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>border-width 照片折角效果</title>
	<style type="text/css">
		body {
			background-color: #eaf0f2;
		}
		h1{
			font-size: 14px;
			font-family: "Microsoft Yahei";
			text-align: center;
		}
		.paper-flip {/* 最顶层容器 */
		  position: relative;
		  width: 500px;
		  height: 300px;
		  margin: 0 auto;
		}

		.share-layer {/* 分享层按钮 */
		  position: absolute;
		  left: 0;
		  top: 0;
		  width: 500px;
		  height: 300px;
		  background-color: #fff;
		  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
			border: 1px solid red;
		}

		.btn-wrap {
			border: 1px solid blue;
		  pointer-events: none;
		  opacity: 0;
		  margin-top: 140px;
		  text-align: center;
		}

		.btn {
		  padding: 10px;
		  border-radius: 2px;
		  color: #fff;
		  display: inline-block;
		}

		.btn-facebook {
		  background-color: #3b5998;
		}

		.btn-twitter {
		  background-color: #00aced;
		  margin: 0 20px;
		}
		.btn-google {
		  background-color: #d34836;
		}

		.btn-close {
		  pointer-events: none;
		  position: absolute;
		  right: 15px;
		  top: 10px;
		  background-color: rgba(0,0,0,0.3);
		  font-size: 20px;
		  z-index: 11;
		  opacity: 0;
		  cursor: default;
		}

		.paper-flip.folded .btn-close {
		  -webkit-transition: 0.4s;
		  transition: 0.4s;
		  -webkit-transition-delay: 0.6s;
		  transition-delay: 0.6s;
		  opacity:1;
		  cursor: pointer;
		  pointer-events: initial;
		}

		.paper-flip.folded .btn-wrap{
		  opacity: 1;
		  -webkit-transition: all 0.4s;
		  -o-transition: all 0.4s;
		  transition: all 0.4s;
		  -webkit-transition-delay: 0.6s;
		  -o-transition-delay: 0.6s;
		  transition-delay: 0.6s;
		  pointer-events: initial;
		}

		.paper-flip.folded .share-layer {
		  z-index: 1;
		  -webkit-transition: all 0.1s;
		  -o-transition: all 0.1s;
		  transition: all 0.1s;
		  -webkit-transition-delay: 0.4s;
		  -o-transition-delay: 0.4s;
		  transition-delay: 0.4s;
		}

		/*image-layer*/
		.image-layer {
		  width: 500px;
		  height: 300px;
		  overflow: hidden;
		  position: absolute;
		  top: 0;
		  left: 0;
		}

		.image-layer img {
		  width: 500px;
		  cursor: pointer;
		}

		.image-layer:before {
		  content: '';
		  /* position: absolute; */
		  top: 0;
		  right: 0;
		  border-style: solid;
		  border-width: 0;
		  border-color: rgba(0,0,0,0.2) #fff;
		  border-radius: 0 0 0 4px;
		  box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
		  -webkit-transition: all 0.4s ease-out;
		  transition:all 0.4s ease-out;
		}

		.image-layer:hover:before{
		  border-right-width:80px;
		  border-bottom-width:80px;
		}

		.paper-flip.folded .image-layer:before{
		  border-right-width:1000px;
		  border-bottom-width:600px;
		}
	</style>
</head>
<body>
	<h1>请使用webkit内核标准浏览器查看效果</h1>
	<div class="paper-flip" id="paper-flip">

	  <div class="share-layer">
	    <div class="btn-wrap">
	      <a class="btn btn-facebook">FaceBook</a>
	      <a class="btn btn-twitter">Twitter</a>
	      <a class="btn btn-google">Google +</a>
	    </div>
	    <span class="btn-close">×</span>
	  </div>

	  <div class="image-layer" id="image-layer">
	    <img src="table.jpg" alt="">
	  </div>

	</div>
	<script type="text/javascript">
		document.getElementById('paper-flip').addEventListener("click",function(e){
		  if(e.target.className=="btn-close"){
		    this.className = "paper-flip";
		  } else {
		    this.className = "paper-flip folded";
		  }
		});
	</script>
</body>
</html>